<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title><spring:message code="pattern.chengpin"></spring:message></title>
     <link href="${pageContext.request.contextPath }/phone/css/cssfolder/cssstyle/stylefloder.css" rel="stylesheet" type="text/css" />  
    <link href="${pageContext.request.contextPath }/phone/css/xiadan.css" rel="stylesheet" />
    <style>
    .spinner{float:left;}
    </style>
</head>
<body>
    <div>
       
        <!--头部--有分类-->
        <div class="cate_header">
            <div class="putong_top">
                <a href="javascript:history.go(-1);"></a>
                <div><spring:message code="pattern.chengpin"></spring:message></div>
            </div>
        </div>
<%-- <ul class="shiyititle">
<li class="active"><a href="${pageContext.request.contextPath }/api/pattern/chengpin?id=${pattern.pId }"><spring:message code="pattern.chengpin"></spring:message></a></li>
<li><a href="${pageContext.request.contextPath }/api/pattern/yinhua?id=${pattern.pId }"><spring:message code="pattern.yinhua"></spring:message></a></li>
<li><a href="${pageContext.request.contextPath }/api/pattern/maiduan?id=${pattern.pId }"><spring:message code="pattern.maiduan"></spring:message></a></li>
<li><a href="${pageContext.request.contextPath }/api/pattern/mote?id=${pattern.pId }">我的模特</a></li>
</ul> --%>
        <div role="main" class="main" style="background:#F0F0F2;padding-bottom:0px;">
           <div class="buliao">
               <div class="bl">
                   <ul class="buli">
                      <c:forEach items="${fabricFilterList }" var="fabricFilter" varStatus="status">
	                   	<li class="<c:if test='${status.first}'>on</c:if>" id="${fabricFilter.ffId }" name="ffId" title="${fabricFilter.ffName }">${fabricFilter.ffName }</li>
	                  </c:forEach>
                   </ul>
               </div>
               <div id="mianliao" class="blcon">
                   <c:forEach items="${fabricFilterList }"  var="fabricFilter" varStatus="status">
                   <ul class="<c:if  test='${!status.first}'>hide</c:if>">
                   <c:forEach items="${fabricListFIngredientsList}" var="fabricListFIngredients">
                    <c:if test="${fabricListFIngredients.fIngredients==fabricFilter.ffId }">
                       <li>
                           <input onclick="jisuan()" rel="${fabricListFIngredients.fId}" mani="${fabricListFIngredients.fPrice }" type="radio" name="bl" />
                           <label>${fabricListFIngredients.fName }</label>
                           <span class="ri"><i>${fabricListFIngredients.fPrice }</i><spring:message code="pattern.unit"></spring:message></span>
                       </li>
                   </c:if>
                 </c:forEach>    
                   </ul>
                 </c:forEach>  
               </div>
               </div>
           </div><!--布料-->

            <!--工艺-->
            <div id="gongyi"  class="gongyi">
                <p><spring:message code="pattern.digital"></spring:message></p>
                <ul id="patternPrintRadio">
                <c:forEach items="${patternPrintList }" var="patternPrint">
                    <li>
                        <input onclick="jisuan()"  rel="${patternPrint.ppId }" mani="${patternPrint.ppPrice }" type="radio" name="gy" />
                        <label>${patternPrint.ppName }</label>
                        <span class="ri">${patternPrint.ppPrice }<spring:message code="pattern.unit"></spring:message></span>
                    </li>
                 </c:forEach>
                </ul>
            </div>

            <!--数量、购买-->
            <div class="shu_buy">
                <div class="shu_bot">
                    <div class="shu">
                        <label class="le"><spring:message code="pattern.processing"></spring:message></label>
                        <div class=shu_spiner><input onpropertychange="jisuan()" oninput="jisuan()" type="text" id="spinnerId" class="spinner le"/></div>
                        <div class="clr"></div>
                    </div>
                    <div class="zong"><spring:message code="pattern.lump"></spring:message><div class="f-r"><span id="zongjia">0</span><spring:message code="pattern.yuan"></spring:message></div></div>
                </div>
                <div class="shu_btn">
                    <a href="javascript:add(2);"><spring:message code="pattern.join"></spring:message></a>
                    <a href="javascript:add(1);"><spring:message code="pattern.buy"></spring:message></a>
                    <div class="clr"></div>
                </div>
            </div>

        </div>
        <form method="post" action="${pageContext.request.contextPath}/api/orders/viewinsertorders" id="form">
					<input type="hidden" id="pId" name="pId" value="${pattern.pId }">
					<input type="hidden" id="ppId" name="ppId">
					<input type="hidden" id="fId" name="fId">
					<input type="hidden" id="size" name="size">
					<input type="hidden" id="status" name="status" value="2">
					
					</form>
   </div>
    <script src="${pageContext.request.contextPath }/phone/js/jquery-1.8.3.min.js"></script>
    <script src="${pageContext.request.contextPath }/phone/js/extra.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/layer_mobile/layer.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/phone/js/jquery.spinner.js"></script>
    <script type="text/javascript">
        $('.spinner').spinner();
        $(".buli li").click(function(){
        	var objId=$(this).attr('id');
        	requestPatternPrint(objId);
        	$(this).addClass("on").siblings().removeClass("on");
        	$(".blcon ul").addClass("hide").eq($(this).index()).removeClass("hide");
        });
    	$('#spinnerId').parent().find('button').click(function(){
    		jisuan()
    	});
        function jisuan(){
        	var mianliao=$('#mianliao').find('input:radio:checked').attr("mani");
        	var yinhua=$('#gongyi').find('input:radio:checked').attr("mani");
        	
    	        $("#spinnerId").val(parseInt($("#spinnerId").val()));
    	        
    			if(parseInt($("#spinnerId").val())<1){
    				$("#spinnerId").val(1);
    			}else{
    				//var downRadio=$('#down').find('input:radio:checked');
    	        	//var patternPrintRadio=$('#patternPrintRadio').find('input:radio:checked');
    	        	//if(downRadio.length>0&&patternPrintRadio.length>0){
    	            if(mianliao!=null&&yinhua!=null){

    	        		//var downRadioPrice=downRadio.parent().next().find('i').text();
    	        		//var patternPrintRadioPrice=patternPrintRadio.parent().next().find('i').text();
    	        		var spinnerM=$('#spinnerId').val();
    	        		
    	        		
    	        		

    	        		if(spinnerM <= 50){
    	        			totalPirce = (parseFloat(mianliao)*1.3 + parseFloat(yinhua)*2)*spinnerM;
    	        		}else if(spinnerM > 50 & spinnerM <= 100){
    	        			totalPirce = (parseFloat(mianliao)*1.3 + parseFloat(yinhua)*2)*50
    	        			+ (parseFloat(mianliao)*1.3 + parseFloat(yinhua)*1.5)*(spinnerM-50);
    	        		}else if(spinnerM > 100 & spinnerM <= 300){
    	        			totalPirce = (parseFloat(mianliao)*1.3 + parseFloat(yinhua)*2)*50
    						+ (parseFloat(mianliao)*1.3 + parseFloat(yinhua)*1.5)*50
    						+ (parseFloat(mianliao)*1.15 + parseFloat(yinhua)*1.5)*(spinnerM-100);
    	        		}else if(spinnerM > 300 & spinnerM <= 500){
    	        			totalPirce = (parseFloat(mianliao)*1.3 + parseFloat(yinhua)*2)*50
    						+ (parseFloat(mianliao)*1.3 + parseFloat(yinhua)*1.5)*50
    						+ (parseFloat(mianliao)*1.15 + parseFloat(yinhua)*1.5)*200
    						+ (parseFloat(mianliao)*1.15 + parseFloat(yinhua)*1.2)*(spinnerM-300);
    	        		}else if(spinnerM > 500 & spinnerM <= 1000){
    	        			totalPirce = (parseFloat(mianliao)*1.3 + parseFloat(yinhua)*2)*50
    						+ (parseFloat(mianliao)*1.3 + parseFloat(yinhua)*1.5)*50
    						+ (parseFloat(mianliao)*1.15 + parseFloat(yinhua)*1.5)*200
    						+ (parseFloat(mianliao)*1.15 + parseFloat(yinhua)*1.2)*200
    						+ (parseFloat(mianliao)*1 + parseFloat(yinhua)*1.2)*(spinnerM-500);
    	        		}else{
    	        			totalPirce = (parseFloat(mianliao)*1.3 + parseFloat(yinhua)*2)*50
    						+ (parseFloat(mianliao)*1.3 + parseFloat(yinhua)*1.5)*50
    						+ (parseFloat(mianliao)*1.15 + parseFloat(yinhua)*1.5)*200
    						+ (parseFloat(mianliao)*1.15 + parseFloat(yinhua)*1.2)*200
    						+ (parseFloat(mianliao)*1 + parseFloat(yinhua)*1.2)*500
    						+ (parseFloat(mianliao)*1 + parseFloat(yinhua)*1)*(spinnerM-1000);
    	        		}
    	        		
    	        		
    	        		
    	        		
    	        		//$('#downPrice').text(totalPirce.toFixed(2));

    	        	}
    			}
        	//((parseFloat(mianliao)+parseFloat(yinhua))*$('#spinnerId').val()).toFixed(2)
        	$("#zongjia").text(totalPirce.toFixed(2));
        }
        function add(statu){
			var pId=null;//huaxing
			var ppId=null;//yinhua
			var fId=null;//buliao
			var size=null;
			var yinhua = document.getElementsByName("gy");
			for (var i = 0; i < yinhua.length; i++) {
				if (yinhua[i].checked) {
					ppId=$(yinhua[i]).attr("rel");
				}
			}
			var buliao = document.getElementsByName("bl");
			for (var i = 0; i < buliao.length; i++) {
				if (buliao[i].checked) {
					fId=$(buliao[i]).attr("rel");
				}
			}
			size=$('#spinnerId').val();
			if(ppId==null||ppId==""||size==null||size==""||fId==null||fId==""||size=="0"){
				layer.open({content: '<spring:message code="pattern.least"></spring:message>',skin: 'msg',time: 1});
		   	   	
				 return ;
			}
			
			$("#ppId").val(ppId);
			$("#fId").val(fId);
			$("#size").val(size);
			if(statu==1){
				
			
			$.ajax({
	   			 url:'${pageContext.request.contextPath }/web/orders/chakanhuaxing',
	   			 async : false,
	   			 data: {"pId":"${pattern.pId }"},
	   			 type : "GET", 
	   			 success :function(result){
	   			 if(result == "SUCCESS"){
	   				$("#form").submit();
	   			 }else{//失败
	   				layer.open({content: '<spring:message code="pattern.beenBought"></spring:message>',skin: 'msg',time: 1});
	   		   	   	
	   			 }
	   			 }
	   			 });
			}else{
				$.ajax({
	    			 url:'${pageContext.request.contextPath }/web/shoppingcart/insertshoppingcart',
	    			 async : false,
	    			 data:$("#form").serialize() ,
	    			 type : "POST", 
	    			 success :function(result){
	    			 var status=result.msg.status;
	    			 var desc=result.msg.desc;
	    			 if(status == 0){
	    					layer.open({content: '<spring:message code="pattern.success"></spring:message>',skin: 'msg',time: 1});
	    			   	   	
	    			 }else if(status == 2){//失败
	    					layer.open({content: '<spring:message code="pattern.fail"></spring:message>',skin: 'msg',time: 1});
	    			   	   	
	    				}else if(status ==1){//被买断
	    			    	layer.open({content: '<spring:message code="pattern.beenBought"></spring:message>',skin: 'msg',time: 1});
	    			   	   	
	    			    }else if(status ==3){//被买断
	    			    	layer.open({content: '<spring:message code="pattern.noLogin"></spring:message>',skin: 'msg',time: 1});
	    			   	   	
	    			    }
	    			 }
	    			 });
			}
			
		}
        
      //根据面料成分查找相应的数码印花工艺信息
        function requestPatternPrint(objId){
        	$.ajax({
        		async:false,
        		url:'../../web/pattern/requestPatternPrint',
        		data:{'id':objId},
        		type:'post',
        		success:function(result){
        			var status=result.msg.status;
        			if(status==0){
        				var patternPrintList=result.data.patternPrintList;
        				$('#patternPrintRadio').empty();
        				var innerHtml='';
        				for(var i=0,listLength=patternPrintList.length;i<listLength;i++){
        					innerHtml+='<li>';
        					innerHtml+='<input onclick="jisuan()"  rel="'+patternPrintList[i].ppId+'" mani="'+patternPrintList[i].ppPrice+'" type="radio" name="gy" />';
        					innerHtml+='<label>'+patternPrintList[i].ppName+'</label>';
        					innerHtml+='<span class="ri">'+patternPrintList[i].ppPrice+'<spring:message code="pattern.unit"></spring:message></span>';
        					innerHtml+='</li>';
        				}
        				$('#patternPrintRadio').append(innerHtml);
        			}else if(status==1){
        				$('#patternPrintRadio').empty();
        			}
        		}
        	});
        }
        
    </script>


</body>
</html>
